<template>
  <div class="list-content">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item v-if="isMuilUnitUser">
        <el-select
          filterable
          @change="getStatis()"
          v-model="formInline.orgId"
          placeholder="请选择业主单位"
        >
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          @change="getStatis()"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getStatis()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-row class="overview-wrap" :gutter="40">
      <span style="display:none;">{{ freashStaticFlag }}</span>
      <el-col :span="12">
        <div class="item-wrap">
          <p class="item-value color-1">{{ staticObj.totalCount || 0 }}</p>
          <p class="item-title">警情总数</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="item-wrap">
          <p class="item-value color-5">{{ staticObj.unHandlerCount || 0 }}</p>
          <p class="item-title">未处理总数</p>
        </div>
      </el-col>
      <!-- <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-3">{{ staticObj.handlerCount ||0}}</p>
          <p class="item-title">处理总数</p>
        </div>
      </el-col> -->
    </el-row>
    <el-row v-loading="loading">
      <!-- 单单位 -->
      <el-col :span="24">
        <div class="grid-content">
          <div class="chart-heaad">警情发生情况</div>
          <el-row :gutter="20">
            <el-col :md="12">
              <div id="chart_AlarmAnalysis_type" class="chart-content bg"></div>
            </el-col>
            <el-col :md="12">
              <div
                id="chart_AlarmAnalysis_topTen"
                class="chart-content bg"
              ></div>
            </el-col>
          </el-row>
          <el-row>
            <div id="chart_AlarmAnalysis_change" class="chart-content"></div>
          </el-row>
          <div class="chart-heaad">警情处理情况</div>
          <el-row>
            <div id="chart_AlarmAnalysis_result" class="chart-content"></div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getAlarmGroupCount,
  getAlarmTotalCount,
  getOrgAlertStatistics
} from "@/api/alarm";
import { getOrgAlertFcfTopN } from "@/api/fcf";
import { getOrgList } from "@/api/org";
import util from "@/utils/util";

export default {
  name: "AlarmAnalysis",
  props: ["param"],
  data() {
    return {
      pickerOptions: $.extend(
        {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        util.intTimePickerOptions()
      ),
      freashStaticFlag: 0,
      formInline: {
        orgId: this.$store.state.userinfo.isMuilUnitUser
          ? this.$store.state.userinfo.organizationIds
          : this.$store.state.userinfo.org.id,
        time: ""
      },
      util: util,
      tableData: [], //表格数据
      staticObj: {}, //头部各状态个数统计
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      accountName: this.$store.state.userinfo.accountName,
      orgOptions: [
        {
          organizationId: this.$store.state.userinfo.organizationIds,
          shortName: "全部业主单位"
        }
      ],
      loading: false,
      colorList: [
        "#70bbea",
        "#5c90d2",
        "#a58ad4",
        "#f3b75e",
        "#ea4f63",
        "#16adc4",
        "#9BCA63",
        "#FAD860",
        "#F3A43B",
        "#60C0DD",
        "#D7504B",
        "#C6E579",
        "#F4E001",
        "#F0805A",
        "#26C0C0",
        "#8890AB"
      ]
    };
  },
  created: function() {
    //默认一个月
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.formInline.time = [
      util.ilinkTimeformat.format(start, "yyyy-MM-dd ") + "00:00:00",
      util.ilinkTimeformat.format(end, "yyyy-MM-dd ") + "23:59:59"
    ];
    //绑定下拉框
    if (this.isMuilUnitUser) {
      getOrgList({ queryType: 0 }).then(data => {
        this.orgOptions.push.apply(this.orgOptions, data.data);
      });
    }
    this.getStatis();
  },
  methods: {
    getStatis() {
      let that = this;
      that.loading = true;
      //头统计 && 处理结果分布
      getAlarmTotalCount({
        orgIds: that.formInline.orgId,
        startTime: that.formInline.time
          ? that.formInline.time[0].split(" ")[0] + " 00:00:00"
          : "",
        endTime: that.formInline.time
          ? that.formInline.time[1].split(" ")[0] + " 23:59:59"
          : ""
      }).then(data => {
        that.loading = false;
        let result = data.data;
        $.extend(this.staticObj, result);
        let xData = [
          "真实报警数",
          "真实故障数",
          "处理为误报数",
          "处理为测试数",
          "处理其他数目"
        ];
        let yData = [];
        yData.push({
          value: result.realAlarmResult || 0,
          itemStyle: { normal: { color: that.colorList[4] } }
        });
        yData.push({
          value: result.realFaultResult || 0,
          itemStyle: { normal: { color: that.colorList[3] } }
        });
        yData.push({
          value: result.wrongAlarmResult || 0,
          itemStyle: { normal: { color: that.colorList[1] } }
        });
        yData.push({
          value: result.testAlarmResult || 0,
          itemStyle: { normal: { color: that.colorList[0] } }
        });
        yData.push({
          value: result.otherResult || 0,
          itemStyle: { normal: { color: that.colorList[2] } }
        });
        let option_echart = {
          title: {
            textStyle: { color: "#999", fontSize: "14" },
            y: "left",
            left: "-5",
            top: "0",
            text: "处理结果分布"
          },
          grid: {
            left: "3%",
            right: "3%",
            top: "35px",
            bottom: "30"
          },
          tooltip: {
            trigger: "axis",
            formatter: "{b}: {c}",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: "category",
            axisTick: {
              show: false
            },
            triggerEvent: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(55, 139, 246, 0.8)",
                width: 1 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#2F3444",
                fontSize: 14
              }
              //interval:xInterval
            },
            //max:30,
            boundaryGap: true,
            data: xData
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false
            },
            //min:minLeavel,
            //max:maxLeavel,
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: "{value}",
              show: true,
              textStyle: {
                color: "#2F3444",
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(55, 139, 246, 0.8)",
                opacity: 0.7
              }
            },
            axisPointer: {
              snap: true
            },
            minInterval: 1
          },
          series: [
            {
              name: "处理结果分布",
              type: "bar",
              barWidth: "30",
              itemStyle: {
                normal: {
                  color: "#5c90d2"
                }
              },
              label: {
                normal: {
                  show: false,
                  position: "inside"
                }
              },
              data: yData
            }
          ]
        };
        that.$echarts
          .init(document.getElementById("chart_AlarmAnalysis_result"))
          .setOption(option_echart, true);
        let pieDate = [
          {
            name: "报警",
            value: result.fireAlarmCount,
            itemStyle: { normal: { color: that.colorList[4] } }
          },
          {
            name: "故障",
            value: result.faultAlarmCount,
            itemStyle: { normal: { color: that.colorList[3] } }
          },
          {
            name: "屏蔽",
            value: result.shieldAlarmCount,
            itemStyle: { normal: { color: that.colorList[15] } }
          },
          {
            name: "联动",
            value: result.linkageAlarmCount,
            itemStyle: { normal: { color: that.colorList[0] } }
          }
        ];
        that.$echarts
          .init(document.getElementById("chart_AlarmAnalysis_type"))
          .setOption(
            {
              title: {
                textStyle: { color: "#2F3444", fontSize: "16" },
                y: "left",
                left: "15",
                top: "0",
                text: "警情类型分布"
              },
              grid: {
                left: "3%",
                right: "3%",
                top: "35px",
                bottom: "30px"
              },
              tooltip: {
                trigger: "item",
                formatter: "{b}: {c}({d}%)"
              },
              series: [
                {
                  type: "pie",
                  radius: ["50%", "70%"],
                  avoidLabelOverlap: true,
                  label: {
                    formatter: "{b}: {c}({d}%)",
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: "20",
                        fontWeight: "bold"
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: true
                    }
                  },
                  data: pieDate
                }
              ]
            },
            true
          );
        this.freashStaticFlag++;
      });
      //警情发生数量变化
      getAlarmGroupCount({
        orgIds: that.formInline.orgId,
        queryType: 0,
        startTimeStr: that.formInline.time
          ? that.formInline.time[0].split(" ")[0] + " 00:00:00"
          : "",
        endTimeStr: that.formInline.time
          ? that.formInline.time[1].split(" ")[0] + " 23:59:59"
          : ""
      }).then(data => {
        that.loading = false;
        let xData = [];
        let yData1 = [];
        let yData2 = [];
        let yData3 = [];
        let yData4 = [];
        $.each(data.data, (index, obj) => {
          xData.push(
            obj.date.substring(0, 4) +
              "-" +
              obj.date.substring(4, 6) +
              "-" +
              obj.date.substring(6, 8)
          );
          yData1.push(obj.fireAlarmCount);
          yData2.push(obj.faultAlarmCount);
          yData3.push(obj.shieldAlarmCount);
          yData4.push(obj.linkageAlarmCount);
        });
        let option_echart = {
          legend: {
            textStyle: { color: "#444" },
            y: "top",
            right: "40",
            itemHeight: 11,
            itemWidth: 11,
            itemGap: 20,
            data: [
              {
                name: "报警",
                icon: "bar",
                textStyle: { color: "#666666", fontSize: "15" }
              },
              {
                name: "故障",
                icon: "bar",
                textStyle: { color: "#666666", fontSize: "15" }
              },
              {
                name: "屏蔽",
                icon: "bar",
                textStyle: { color: "#666666", fontSize: "15" }
              },
              {
                name: "联动",
                icon: "bar",
                textStyle: { color: "#666666", fontSize: "15" }
              }
            ]
          },
          title: {
            textStyle: { color: "#2F3444", fontSize: "16" },
            y: "left",
            left: "15",
            top: "0",
            text: "警情发生数量变化"
          },
          grid: {
            left: "3%",
            right: "3%",
            top: "20%",
            bottom: "8%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              animation: false
            }
          },
          xAxis: [
            {
              type: "category",
              axisTick: { show: false },
              boundaryGap: false,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  width: 1 //这里是为了突出显示加上的
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                }
                //interval:xInterval
              },
              data: xData
            }
          ],
          yAxis: [
            {
              type: "value",
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 0 //这里是为了突出显示加上的
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                }
                //interval:xInterval
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  width: 1
                }
              },
              name: ""
            }
          ],

          series: [
            {
              name: "联动",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 7,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1.5 //折线宽度
                  },
                  color: "#8DB1DF" //折线颜色
                },
                emphasis: {
                  color: "#8DB1DF"
                }
              },
              data: yData4
            },
            {
              name: "屏蔽",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 7,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1.5 //折线宽度
                  },
                  color: "#777D83" //折线颜色
                },
                emphasis: {
                  color: "#777D83"
                }
              },
              data: yData3
            },
            {
              name: "故障",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 7,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1.5 //折线宽度
                  },
                  color: "#E8B956" //折线颜色
                },
                emphasis: {
                  color: "#E8B956"
                }
              },
              data: yData2
            },
            {
              name: "报警",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 7,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1.5 //折线宽度
                  },
                  color: "#D35863" //折线颜色
                },
                emphasis: {
                  color: "#D35863"
                }
              },
              data: yData1
            }
          ]
        };
        that.$echarts
          .init(document.getElementById("chart_AlarmAnalysis_change"))
          .setOption(option_echart, true);
      });
      //警情设备、单位TOP10
      if (that.isMuilUnitUser) {
        getOrgAlertStatistics({
          orgIds: that.formInline.orgId,
          pageSize: 10,
          order: 0,
          startTime: that.formInline.time
            ? that.formInline.time[0].split(" ")[0] + " 00:00:00"
            : "",
          endTime: that.formInline.time
            ? that.formInline.time[1].split(" ")[0] + " 23:59:59"
            : ""
        }).then(data => {
          that.loading = false;
          let xData = [];
          let yData = [];
          $.each(data.data.dataList, (index, obj) => {
            xData.push(obj.orgName);
            yData.push({
              value: obj.countReset,
              itemStyle: { normal: { color: that.colorList[index] } }
            });
          });
          let option_echart = {
            title: {
              textStyle: { color: "#2F3444", fontSize: "16" },
              y: "left",
              left: "15",
              top: "0",
              text: "警情单位TOP10"
            },
            /*grid: {
                  left: '10%',
                  right: '10%',
              },*/
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            xAxis: {
              type: "category",
              axisTick: {
                show: false
              },
              triggerEvent: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  width: 1 //这里是为了突出显示加上的
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                },
                // rotate:xData.length>5?40:0 ,// x轴文字倾斜角
                interval: 0,
                formatter: function(value, index) {
                  //X轴类目项隔一个换行(
                  if (xData.length > 6 && index % 2 != 0) {
                    return "\n\n" + value;
                  } else {
                    return value;
                  }
                }
              },
              //max:30,
              boundaryGap: true,
              data: xData
            },
            yAxis: {
              type: "value",
              axisTick: {
                show: false
              },
              //min:minLeavel,
              //max:maxLeavel,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: "{value}",
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  opacity: 0.7
                }
              },
              axisPointer: {
                snap: true
              },
              minInterval: 1
            },
            series: [
              {
                name: "警情数",
                type: "bar",
                barWidth: "30",
                itemStyle: {
                  normal: {
                    color: "#5c90d2"
                  }
                },
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: yData
              }
            ]
          };
          that.$echarts
            .init(document.getElementById("chart_AlarmAnalysis_topTen"))
            .setOption(option_echart, true);
        });
      } else {
        getOrgAlertFcfTopN({
          orgIds: that.formInline.orgId,
          topN: 10,
          startTime: that.formInline.time
            ? that.formInline.time[0].split(" ")[0] + " 00:00:00"
            : "",
          endTime: that.formInline.time
            ? that.formInline.time[1].split(" ")[0] + " 23:59:59"
            : ""
        }).then(data => {
          that.loading = false;
          let xData = [];
          let yData = [];
          $.each(data.data, (index, obj) => {
            xData.push(obj.fcfName);
            yData.push({
              value: obj.num,
              itemStyle: { normal: { color: that.colorList[index] } }
            });
          });
          let option_echart = {
            title: {
              textStyle: { color: "#2F3444", fontSize: "16" },
              y: "left",
              left: "15",
              top: "0",
              text: "警情设备TOP10"
            },
            /*grid: {
                  left: '10%',
                  right: '10%',
              },*/
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            xAxis: {
              type: "category",
              axisTick: {
                show: false
              },
              triggerEvent: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  width: 1 //这里是为了突出显示加上的
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                }
                //interval:xInterval
              },
              //max:30,
              boundaryGap: true,
              data: xData
            },
            yAxis: {
              type: "value",
              axisTick: {
                show: false
              },
              //min:minLeavel,
              //max:maxLeavel,
              axisLine: {
                show: false
              },
              axisLabel: {
                formatter: "{value}",
                show: true,
                textStyle: {
                  color: "#2F3444",
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(55, 139, 246, 0.8)",
                  opacity: 0.7
                }
              },
              axisPointer: {
                snap: true
              },
              minInterval: 1
            },
            series: [
              {
                name: "警情数",
                type: "bar",
                barWidth: "30",
                itemStyle: {
                  normal: {
                    color: "#5c90d2"
                  }
                },
                label: {
                  normal: {
                    show: false,
                    position: "inside"
                  }
                },
                data: yData
              }
            ]
          };
          that.$echarts
            .init(document.getElementById("chart_AlarmAnalysis_topTen"))
            .setOption(option_echart, true);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  .chart-heaad {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
    color: rgba(68, 107, 222, 1);
    -webkit-text-stroke: 1px rgba(68, 107, 222, 1);
    text-stroke: 1px rgba(68, 107, 222, 1);
  }
  .chart-content {
    margin-top: 20px;
    height: 354px;
    padding: 20px;
    &.bg {
      background: rgba(225, 225, 225, 0.2);
    }
    &.bd {
      border: 1px solid rgba(225, 225, 225, 1);
    }
    &.pd0 {
      padding: 0;
    }
  }
  .chart-content-title {
    line-height: 65px;
    text-indent: 40px;
    font-size: 16px;
    font-weight: bold;
    color: #2f3444;
    background: rgba(240, 242, 245, 0.5);
  }
}
</style>
